<template>
  <div class="wrapper">
    <top></top>
    <left></left>
    <div class="content">
      <div class="col-xs-12 col-sm-12 col-md-12 main-cont-target" id="js-mainContTarget">
        <div class="main-cont-wrapper" id="js-mainContWrapper">
          <!-- Child Comp -->
          <transition name="fade" mode="out-in">
            <router-view/>
          </transition>
        </div>
        <footer class="main-footer" id="js-footBox">
          <!--<div class="pull-right hidden-xs">-->
              <!--<b>Version</b> 1.0.0-->
          <!--</div>-->
          <strong>Copyright © 2017.</strong> All rights reserved.
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import Left from '../components/common/Left.vue'
import Top from '../components/common/Top.vue'

export default {
  components: {
    Left,
    Top
  },
  name: 'Main',
  data () {
    return {
    }
  },
  methods: {
  },
  mounted: function () {
    this.$nextTick(() => {
      window.$(function () {
        // function fixFoot () {
        //   let winH = window.$(window).height()
        //   let topFootHeight = window.$('#js-topBox').outerHeight() + window.$('#js-footBox').outerHeight()
        //   let dH = null
        //   if (winH >= topFootHeight) {
        //     dH = winH - topFootHeight
        //     window.$('#js-mainContWrapper').css('min-height', dH)
        //   }
        // }

        function toggleLeftAsideClass () {
          let winW = window.$(window).width()
          let $app = window.$('#app')

          // 如果是中等屏幕以上（桌面显示器）
          if (winW >= 992) {
            $app.removeClass('hide-left-aside')
          } else {
            $app.addClass('hide-left-aside')
          }
        }
        // fixFoot()
        toggleLeftAsideClass()
        window.$(window).resize(function () {
          // fixFoot()
          toggleLeftAsideClass()
        })
      })
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="scoped" type="text/css">
.content{
    background: none repeat scroll 0 0 #fff;
    position: absolute;
    left: 250px;
    right: 0;
    top: 60px;
    bottom: 0;
    width: auto;
    padding: 10px 5px;
    box-sizing: border-box;
    overflow-y: scroll;
}
 .hide-left-aside .content {
    top: 120px;
  }
  .main-footer {
    width: 100%;
    background: #fff;
    padding: 10px 15px 0;
    color: #444;
    border-top: 3px double #d2d6de;
  }
</style>
